<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>蜗牛图书商城</title>
<link rel="stylesheet" type="text/css"
	href="bootstrap/css/bootstrap.min.css" />
<script src="js/jquery-3.5.1.min.js" type="text/javascript"
	charset="utf-8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"
	charset="utf-8"></script>
<script src="js/template-web.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<!-- 标题栏 -->
	<nav class="navbar navbar-fixed-top bg-info" style="position: sticky;">
		<!-- Logo和登录信息 -->
		<div class="col-md-12">
			<!-- Logo -->
			<div class="col-md-6 text-left" onclick="goIndex()">
				<h2>欢迎来到蜗牛图书商城！</h2>
			</div>
			<!-- 根据是否登录，显示不同的信息 -->
			<c:if test="${loginUser==null}">
				<!-- 未登录时提示用户登录或注册 -->
				<div class="col-md-6 text-right">
					<div>请登录！</div>
					<div>
						<button type="button" class="btn btn-success btn-group-sm"
							data-toggle="modal" data-target="#userLoginModal">登录</button>
						<button type="button" class="btn btn-info btn-group-sm"
							data-toggle="modal" data-target="#addUserModal">注册</button>
					</div>
				</div>
			</c:if>
			<c:if test="${loginUser!=null}">
				<!-- 已登录时，欢迎用户，并展示个人中心，退出登录按钮 -->
				<div class="col-md-6 text-right">
					<div>欢迎${loginUser.uname}!</div>
					<div>
						<div class="btn-group">
							<button type="button"
								class="btn btn-success btn-group-sm dropdown-toggle"
								data-toggle="dropdown">
								个人中心&nbsp;<span class="caret"></span>
							</button>
							<ul class="dropdown-menu" role="menu">
								<li><a href="MyOrderForm.jsp">订单管理</a></li>
								<li class="divider"></li>
								<li><a href="MyAddress.jsp">地址管理</a></li>
								<li class="divider"></li>
								<li><a href="userUpdateUpsw.jsp">修改密码</a></li>
								<li class="divider"></li>
								<li><a href="userUpdateUname.jsp">修改昵称</a></li>
							</ul>
						</div>
						<a href="cart.jsp" class="btn btn-group-sm btn-info">购物车</a> <a
							href="user?opr=userLogout" class="btn btn-group-sm btn-danger">退出登录</a>
					</div>
				</div>
			</c:if>
		</div>

		<!-- 搜索框 -->
		<div class="col-md-12" style="padding-bottom: 10px">
			<form action="" onsubmit="return false">
				<div class="col-md-8 col-md-push-2 text-left">
					<input type="text" placeholder="请输入您想购买的商品" class="form-control"
						value="${wd}" id="searchWords" />
				</div>
				<div class="col-md-1 col-md-push-1 text-right">
					<button class="btn btn-block btn-primary" onclick="search()">搜索</button>
				</div>
			</form>
		</div>
	</nav>

	<!-- 用户注册模态框 -->
	<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 class="modal-title">用户注册</h4>
				</div>
				<div class="modal-body" style="height: 300px">
					<form class="form form-horizontal  col-md-push-1 col-md-10 ">
						<div class="form-group ">
							<div class="col-md-3 text-right">
								<label for="uaccount">用户账号：</label>
							</div>
							<div class="col-md-9">
								<input type="text" name="uaccount" id="uaccount"
									onblur="checkUaccount()" placeholder="请输入账号"
									class="form-control" />
							</div>
							<div class="col-md-9 col-md-push-3 text-left">
								<span id="uaccountMsg">&nbsp;</span>
							</div>
						</div>
						<div class="form-group ">
							<div class="col-md-3 text-right">
								<label for="uname">用户昵称：</label>
							</div>
							<div class="col-md-9">
								<input type="text" name="uname" id="uname" onblur="checkUname()"
									placeholder="请输入昵称" class="form-control" />
							</div>
							<div class="col-md-9 col-md-push-3  text-left">
								<span id="unameMsg">&nbsp;</span>
							</div>
						</div>
						<div class="form-group ">
							<div class="col-md-3 text-right">
								<label for="upsw">用户密码：</label>
							</div>
							<div class="col-md-9">
								<input type="password" name="upsw" id="upsw" autocomplete="off"
									onblur="checkUpsw()" placeholder="请输入新密码" class="form-control" />
							</div>
							<div class="col-md-9 col-md-push-3  text-left">
								<span id="upswMsg">&nbsp;</span>
							</div>
						</div>
						<div class="form-group ">
							<div class="col-md-3 text-right">
								<label for="confirmpsw">确认密码：</label>
							</div>
							<div class="col-md-9">
								<input type="password" name="confirmpsw" id="confirmpsw"
									onblur="checkConfirmpsw()" placeholder="请输入新密码"
									autocomplete="off" class="form-control" />
							</div>
							<div class="col-md-9 col-md-push-3  text-left">
								<span id="confirmpswMsg">&nbsp;</span>
							</div>
						</div>

					</form>
				</div>
				<div class="modal-footer">
					<div class="form-group col-md-8 col-md-push-2">
						<button type="button" class="btn btn btn-block btn-success"
							onclick="addUser()">注册</button>
						<button type="button" class="btn btn btn-block btn-warning"
							data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 用户登录模态框 -->
	<div class="modal fade" id="userLoginModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 class="modal-title">用户登录</h4>
				</div>
				<div class="modal-body" style="height: 180px">
					<form class="form form-horizontal  col-md-push-1 col-md-10 ">
						<div class="form-group ">
							<div class="col-md-3 text-right">
								<label for="uaccountLogin">用户账号：</label>
							</div>
							<div class="col-md-9">
								<input type="text" name="uaccount" id="uaccountLogin"
									onblur="checkUaccountLogin()" placeholder="请输入账号"
									class="form-control" />
							</div>
							<div class="col-md-9 col-md-push-3 text-left">
								<span>&nbsp;</span>
							</div>
						</div>
						<div class="form-group ">
							<div class="col-md-3 text-right">
								<label for="upswLogin">用户密码：</label>
							</div>
							<div class="col-md-9">
								<input type="password" name="upsw" id="upswLogin"
									autocomplete="off" onblur="checkUpswLogin()"
									placeholder="请输入密码" class="form-control" />
							</div>
							<div class="col-md-9 col-md-push-3 text-left">
								<span>&nbsp;</span>
							</div>
						</div>
						<div class="col-md-9 col-md-push-3 text-left">
							<span id="msg">&nbsp;</span>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<div class="form-group col-md-8 col-md-push-2">
						<button type="button" class="btn btn-block btn-success"
							onclick="userLogin()">登录</button>
						<button type="button" class="btn btn-block btn-warning"
							data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	let uaccountFlag = false;

	$(document).ready(function() {
		if ("${loginUser.urole}" == "1" || "${loginUser.urole}" == "2") {
			alert("请重新登录！");
			location.href = "user?opr=userLogout";
		}
	})

	//增加管理员
	function addUser() {
		if (uaccountFlag && checkUname() && checkUpsw() && checkConfirmpsw()) {
			$.ajax({
				url : "user",
				type : "post",
				data : {
					"opr" : "addUser",
					"uaccount" : $("#uaccount").val(),
					"uname" : $("#uname").val(),
					"upsw" : $("#upsw").val()
				},
				dataType : "JSON",
				success : function(result) {
					if (result.msg == "ok") {
						alert("用户注册成功,请登录");
						$('#addUserModal').modal('hide')
					} else if (result.msg == "used") {
						$("#uaccountMsg").html(
								"<font color='red'>账号已被占用。</font>");
						uaccountFlag = false;
					} else {
						alert(result.msg);
					}
				}
			})
		}
	}

	//检查账号格式是否正确，是否唯一
	function checkUaccount() {
		let zz = /^[a-zA-Z0-9]{4,20}$/;
		let unameVal = $("#uaccount").val();
		if (zz.test(unameVal)) {
			$.ajax({
				url : "user",
				type : "post",
				data : {
					"opr" : "checkUaccount",
					"uaccount" : unameVal
				},
				dataType : "JSON",
				success : function(result) {
					if (result.msg == "ok") {
						$("#uaccountMsg").html("<font color='green'>✔</font>");
						uaccountFlag = true;
					} else if (result.msg == "used") {
						$("#uaccountMsg").html(
								"<font color='red'>账号已被占用。</font>");
						uaccountFlag = false;
					} else {
						alert(result.msg);
						uaccountFlag = false;
					}
				}
			})
		} else {
			$("#uaccountMsg").html(
					"<font color='red'>账号由字母、数字组成，长度必须在4-20位之间。</font>");
			uaccountFlag = false;
		}
	}

	//检查新昵称格式是否正确
	function checkUname() {
		let zz = /^[a-zA-Z0-9\u4e00-\u9fa5]{4,10}$/;
		let unameVal = $("#uname").val();
		if (zz.test(unameVal)) {
			$("#unameMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#unameMsg").html(
					"<font color='red'>昵称由字母、数字和汉字组成，长度必须在4-10位之间。</font>");
			return false;
		}
	}

	//检查密码格式是否正确
	function checkUpsw() {
		let zz = /^[a-zA-Z0-9]{6,20}$/;
		let upswVal = $("#upsw").val();
		if (zz.test(upswVal)) {
			$("#upswMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#upswMsg").html(
					"<font color='red'>密码由字母和数字组成，长度必须在6-20位之间。</font>");
			return false;
		}
	}

	//检查两个密码是否相等
	function checkConfirmpsw() {
		let upswVal = $("#upsw").val();
		let confirmpswVal = $("#confirmpsw").val();
		if (upswVal == confirmpswVal) {
			$("#confirmpswMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#confirmpswMsg").html("<font color='red'>两次密码不一致。</font>");
			return false;
		}
	}

	$(document).ready(function() {
		//当用户开始输入时，将提示信息消去
		$("#userLoginModal input").focus(function() {
			$("#msg").html("&nbsp;");
		})
	})

	//登录操作
	function userLogin() {
		if (checkUaccountLogin() && checkUpswLogin()) {
			$.ajax({
				url : "user",
				type : "post",
				data : {
					"opr" : "userLogin",
					"uaccount" : $("#uaccountLogin").val(),
					"upsw" : $("#upswLogin").val()
				},
				dataType : "json",
				success : function(result) {
					if (result.msg == "ok") {
						location.reload();
					} else {
						$("#msg").html(
								"<font color='red'>" + result.msg + "</font>");
					}
				}
			})
		}
	}

	//检查账号栏是否为空
	function checkUaccountLogin() {
		if ($("#uaccountLogin").val() == "") {
			$("#msg").html("<font color='red'>账号不能为空</font>");
			return false;
		}
		return true;
	}

	//检查密码栏是否为空
	function checkUpswLogin() {
		if ($("#upswLogin").val() == "") {
			$("#msg").html("<font color='red'>密码不能为空</font>");
			return false;
		}
		return true;
	}

	//搜索
	function search() {
		let searchWords = $("#searchWords").val();
		if (searchWords.trim() != "") {
			location.href = "goods?opr=search&wd=" + searchWords;
		}
	}

	//返回首页
	function goIndex() {
		location.href = "index.jsp";
	}
</script>
</html>